﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Top.aspx.cs" Inherits="Token.Piker.Web.Top" %>

<%@ Register TagPrefix="uc" TagName="ucHead" Src="~/uc/head.ascx" %>
<%@ Register TagPrefix="uc" TagName="ucFoot" Src="~/uc/foot.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/top.css" type="text/css" rel="stylesheet" />
    <link href="css/uc.css" rel="stylesheet" type="text/css" />
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <link href="js/fancyapps-fancyBox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/tab.js"></script>
    <script src="js/fancyapps-fancyBox/lib/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="js/fancyapps-fancyBox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
</head>
<body>
    <uc:ucHead ID="ucHeader" runat="server" />
    <form id="form1" runat="server">
        <div class="wrap">
            <div class="top">
                <div class="top_logo">
                    <img src="images/top.png" alt="" />
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#">月度</a></li>
                        <li><a href="#">季度</a></li>
                        <li><a href="#">年度</a></li>
                    </ul>
                </div>
            </div>
            <div class="middle">
                <div class="tab_menu">
                    <ul>
                        <li class="selected">最热门用户</li>
                        <li>最热门单张</li>
                        <li>最热门组图</li>
                    </ul>
                </div>
                <div class="tab_box">
                    <div id="hotUser">
                        <div class="date">
                            12.08期
                        </div>
                        <div class="picture">
                            <asp:Repeater ID="rptHotUser" runat="server">
                                <ItemTemplate>
                                    <div class="clear">
                                        <div id="margin-relative-float">
                                            <div class="relative">
                                                <a href="#">
                                                    <img class="picSize" id='<%#Eval("ID")%>' alt='<%#Eval("Descrip") %>' /></a>
                                            </div>
                                        </div>
                                        <div class="right">
                                            <ul>
                                                <li>
                                                    <img src="Images/face.gif" alt="" /></li>
                                                <li>
                                                    <div class="photo-name">
                                                        <p class="font1">
                                                            <%#Eval("UserName") %>
                                                            <p class="font2">
                                                                <%#Eval("PhotoName")%>
                                                            </p>
                                                    </div>
                                                    <div class="photo-message">
                                                        <p>
                                                            上传于<%#Eval("UploadTime")%>
                                                        </p>
                                                        <p>
                                                            属于<span class="color"><%#Eval("TagName")%></span>分类
                                                        </p>
                                                        <p>
                                                            被喜欢<span class="font3"><%#Eval("LikeCount")%></span>次
                                                        </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                    <div class="hide" id="hotSingle">
                        <div class="date">
                            12.08期
                        </div>
                        <div class="picture">
                            <asp:Repeater ID="rptHotSingle" runat="server">
                                <ItemTemplate>
                                    <div class="clear">
                                        <div id="margin-relative-float">
                                            <div class="relative">
                                                <a href="SingleByPID.aspx?PID=<%#Eval("ID") %>" target="_blank">
                                                    <img class="picSize" id='<%#Eval("ID")%>' alt='<%#Eval("Descrip") %>' /></a>
                                            </div>
                                        </div>
                                        <div class="right">
                                            <ul>
                                                <li>
                                                    <img src="images/face.gif" alt="" /></li>
                                                <li>
                                                    <div class="photo-name">
                                                        <p class="font1">
                                                            <%#Eval("UserName")%>
                                                        </p>
                                                        <p class="font2">
                                                            <%#Eval("PhotoName")%>
                                                        </p>
                                                    </div>
                                                    <div class="photo-message">
                                                        <p>
                                                            上传于<%#Eval("UploadTime")%>
                                                        </p>
                                                        <p>
                                                            属于<span class="color"><%#Eval("TagName")%></span>分类
                                                        </p>
                                                        <p>
                                                            被喜欢<span class="font3"><%#Eval("LikeCount")%></span>次
                                                        </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                    <div class="hide" id="hotGroup">
                        <div class="date">
                            12.08期
                        </div>
                        <div class="picture">
                            <asp:Repeater ID="rptHotGroup" runat="server">
                                <ItemTemplate>
                                    <div class="clear">
                                        <div id="margin-relative-float">
                                            <div class="relative">
                                                <a href="Album.aspx?id=<%#Eval("ID") %>" target="_blank">
                                                    <img class="picSize" id='<%#Eval("ID")%>' alt='<%#Eval("Descrip") %>' /></a>
                                            </div>
                                        </div>
                                        <div class="right">
                                            <ul>
                                                <li>
                                                    <img src="images/face.gif" alt="" /></li>
                                                <li>
                                                    <div class="photo-name">
                                                        <p class="font1">
                                                            <%#Eval("UserID")%>
                                                        </p>
                                                    </div>
                                                    <div class="photo-message">
                                                        <p>
                                                            创建于<%#Eval("CreateTime")%>
                                                        </p>
                                                        <p>
                                                            <span class="color"><%#Eval("AlbumName")%></span>相册
                                                        </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <uc:ucFoot ID="ucFooterer" runat="server" />
    <!---登录区域--->
    <div id="div_login" style="display: none">
        <div id="div_login_title">
            <h2>登录到皮壳网</h2>
        </div>
        <div id="login_content">
            <p>
                <label for="userName">
                    用户名：</label>
                <input class="text" type="text" name="username" id="username" />
            </p>
            <p>
                <label for="password">
                    密码：</label>
                <input class="text" type="password" name="password" id="password" />
            </p>
            <p>
                <input class="button" type="button" value="登录" id="btnSubmit" />
                <a id="anchor_create_account" href="Register.aspx">没有账号？立即注册</a>
            </p>
        </div>
    </div>
    <!---登录区域结束--->
    <script src="js/index.js" type="text/javascript"></script>
    <script src="js/login.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {				//给图片添加外框ribbon（ps:代码未优化）
            //以下是对最热门用户处理外框样式
            $("#hotUser .picture .clear:eq(0)").children("div")
											                   .eq(0)
											                   .attr("class", "pic1_container");
            $("#hotUser .pic1_container").append("<div class='ribbon-1st' id='z-index'><img src='images/1st-ribbon.jpg'/></div>");
            $("#hotUser .picSize").eq(0)
								              .parent("a")
								              .css({
								                  "width": 480 + "px",
								                  "height": 320 + "px",
								                  "overflow": "hidden",
								                  "display": "block"
								              });
            var hotUserFirstPid = $("#hotUser .picSize").eq(0).attr("id");
            $("#hotUser .picSize").eq(0).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotUserFirstPid.toString() + "&width=480&height=320");
            $("#hotUser .picSize").eq(0).load(function () {
                DrawImage(this, 480, 320);
            });

            $("#hotUser .picture .clear:eq(1)").children("div")
											                    .eq(0)
											                    .attr("class", "pic2_container");
            $("#hotUser .pic2_container").append("<div class='ribbon-2nd' id='z-index'><img src='images/2nd-ribbon.gif'/></div>");
            $("#hotUser .picSize").eq(1)
								            .parent("a")
								            .css({
								                "width": 400 + "px",
								                "height": 266 + "px",
								                "overflow": "hidden",
								                "display": "block"
								            });
            var hotUserSecondPid = $("#hotUser .picSize").eq(1).attr("id");
            $("#hotUser .picSize").eq(1).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotUserSecondPid.toString() + "&width=400&height=266");
            $("#hotUser .picSize").eq(1).load(function () {
                DrawImage(this, 400, 266);
            });

            $("#hotUser .picture .clear:eq(2)").children("div")
											                    .eq(0)
											                    .attr("class", "pic3_container");
            $("#hotUser .pic3_container").append("<div class='ribbon-3rd' id='z-index'><img src='images/3rd-ribbon.gif'/></div>");
            $("#hotUser .picSize").eq(2)
								            .parent("a")
								             .css({
								                 "width": 266 + "px",
								                 "height": 399 + "px",
								                 "overflow": "hidden",
								                 "display": "block",
								                 "display": "block"
								             });
            var hotUserThridPid = $("#hotUser .picSize").eq(2).attr("id");
            $("#hotUser .picSize").eq(2).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotUserThridPid.toString() + "&width=266&height=399");
            $("#hotUser .picSize").eq(2).load(function () {
                DrawImage(this, 266, 399);
            });

            $("#hotUser .picture .clear:eq(3)").children("div")
											                    .eq(0)
											                    .attr("class", "pic4_container");
            $("#hotUser .pic4_container").append("<div class='ribbon-4th' id='z-index'><img src='images/4th-ribbon.png'/></div>");
            $("#hotUser .picSize").eq(3)
								              .parent("a")
								              .css({
								                  "width": 400 + "px",
								                  "height": 266 + "px",
								                  "overflow": "hidden",
								                  "display": "block"
								              });
            var hotUserFourthPid = $("#hotUser .picSize").eq(3).attr("id");
            $("#hotUser .picSize").eq(3).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotUserFourthPid.toString() + "&width=400&height=266");
            $("#hotUser .picSize").eq(3).load(function () {
                DrawImage(this, 400, 266);
            });

            $("#hotUser .picture .clear:eq(4)").children("div")
											                    .eq(0)
											                    .attr("class", "pic5_container");
            $("#hotUser .pic5_container").append("<div class='ribbon-5th' id='z-index'><img src='images/5th-ribbon.png'/></div>");
            $("#hotUser .picSize").eq(4)
							                 .parent("a")
								             .css({
								                 "width": 400 + "px",
								                 "height": 266 + "px",
								                 "overflow": "hidden",
								                 "display": "block"
								             });
            var hotUserFifthPid = $("#hotUser .picSize").eq(4).attr("id");
            $("#hotUser .picSize").eq(4).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotUserFifthPid.toString() + "&width=400&height=266");
            $("#hotUser .picSize").eq(4).load(function () {
                DrawImage(this, 400, 266);
            });

            //以下是对最热门的单张处理外框样式
            $("#hotSingle .picture .clear:eq(0)").children("div")
                                                                 .eq(0)
                                                                 .attr("class", "pic1_container");
            $("#hotSingle .pic1_container").append("<div class='ribbon-1st' id='z-index'><img src='images/1st-ribbon.jpg'/></div>");
            $("#hotSingle .picSize").eq(0)
									            .parent("a")
									            .css({
									                "width": 480 + "px",
									                "height": 320 + "px",
									                "overflow": "hidden",
									                "display": "block"
									            });
            var hotSingleFirstPid = $("#hotSingle .picSize").eq(0).attr("id");
            $("#hotSingle .picSize").eq(0).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotSingleFirstPid.toString() + "&width=480&height=320");
            $("#hotSingle .picSize").eq(0).load(function () {
                DrawImage(this, 480, 320);
            });



            $("#hotSingle .picture .clear:eq(1)").children("div").eq(0).attr("class", "pic2_container");
            $("#hotSingle .pic2_container").append("<div class='ribbon-2nd' id='z-index'><img src='images/2nd-ribbon.gif'/></div>");
            $("#hotSingle .picSize").eq(1)
									.parent("a")
									.css({
									    "width": 400 + "px",
									    "height": 266 + "px",
									    "overflow": "hidden",
									    "display": "block"
									});
            var hotSingleSecondPid = $("#hotSingle .picSize").eq(1).attr("id");
            $("#hotSingle .picSize").eq(1).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotSingleSecondPid.toString() + "&width=400&height=266");
            $("#hotSingle .picSize").eq(1).load(function () {
                DrawImage(this, 400, 260);
            });

            $("#hotSingle .picture .clear:eq(2)").children("div").eq(0).attr("class", "pic3_container");
            $("#hotSingle .pic3_container").append("<div class='ribbon-3rd' id='z-index'><img src='images/3rd-ribbon.gif'/></div>");
            $("#hotSingle .picSize").eq(2)
									.parent("a")
									.css({
									    "width": 266 + "px",
									    "height": 399 + "px",
									    "overflow": "hidden",
									    "display": "block"
									});
            var hotSingleThridPid = $("#hotSingle .picSize").eq(2).attr("id");
            $("#hotSingle .picSize").eq(2).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotSingleThridPid.toString() + "&width=266&height=399");
            $("#hotSingle .picSize").eq(2).load(function () {
                DrawImage(this, 266, 399);
            });

            $("#hotSingle .picture .clear:eq(3)").children("div").eq(0).attr("class", "pic4_container");
            $("#hotSingle .pic4_container").append("<div class='ribbon-4th' id='z-index'><img src='images/4th-ribbon.png'/></div>");
            $("#hotSingle .picSize").eq(3)
									.parent("a")
									.css({
									    "width": 400 + "px",
									    "height": 266 + "px",
									    "overflow": "hidden",
									    "display": "block"
									});
            var hotSingleFourthPid = $("#hotSingle .picSize").eq(3).attr("id");
            $("#hotSingle .picSize").eq(3).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotSingleFourthPid.toString() + "&width=400&height=266");
            $("#hotSingle .picSize").eq(3).load(function () {
                DrawImage(this, 400, 266);
            });

            $("#hotSingle .picture .clear:eq(4)").children("div").eq(0).attr("class", "pic5_container");
            $("#hotSingle .pic5_container").append("<div class='ribbon-5th' id='z-index'><img src='images/5th-ribbon.png'/></div>");
            $("#hotSingle .picSize").eq(4)
									.parent("a")
									.css({
									    "width": 400 + "px",
									    "height": 266 + "px",
									    "overflow": "hidden",
									    "display": "block"
									});
            var hotSingleFifthPid = $("#hotSingle .picSize").eq(4).attr("id");
            $("#hotSingle .picSize").eq(4).attr("src", "AJAX/Thumbnail.ashx?pid=" + hotSingleFifthPid.toString() + "&width=400&height=266");
            $("#hotSingle .picSize").eq(4).load(function () {
                DrawImage(this, 400, 266);
            });

            //以下是对最热门的组图处理外框样式
            $("#hotGroup .picture .clear:eq(0)").children("div").eq(0).attr("class", "pic1_container");
            $("#hotGroup .pic1_container").append("<div class='ribbon-1st' id='z-index'><img src='images/1st-ribbon.jpg'/></div>");
            $("#hotGroup .picSize").eq(0)
								   .parent("a")
								   .css({
								       "width": 480 + "px",
								       "height": 320 + "px",
								       "overflow": "hidden",
								       "display": "block"
								   });


            $("#hotGroup .picture .clear:eq(1)").children("div").eq(0).attr("class", "pic2_container");
            $("#hotGroup .pic2_container").append("<div class='ribbon-2nd' id='z-index'><img src='images/2nd-ribbon.gif'/></div>");
            $("#hotGroup .picSize").eq(1)
								   .parent("a")
								   .css({
								       "width": 400 + "px",
								       "height": 266 + "px",
								       "overflow": "hidden",
								       "display": "block"
								   });

            $("#hotGroup .picture .clear:eq(2)").children("div")
												.eq(0)
												.attr("class", "pic3_container");
            $("#hotGroup .pic3_container").append("<div class='ribbon-3rd' id='z-index'><img src='images/3rd-ribbon.gif'/></div>");
            $("#hotGroup .picSize").eq(2)
								   .parent("a")
								   .css({
								       "width": 266 + "px",
								       "height": 399 + "px",
								       "overflow": "hidden",
								       "display": "block"
								   });

            $("#hotGroup .picture .clear:eq(3)").children("div")
												.eq(0)
												.attr("class", "pic4_container");
            $("#hotGroup .pic4_container").append("<div class='ribbon-4th' id='z-index'><img src='images/4th-ribbon.png'/></div>");
            $("#hotGroup .picSize").eq(3)
									.parent("a")
									.css({
									    "width": 400 + "px",
									    "height": 266 + "px",
									    "overflow": "hidden",
									    "display": "block"
									});

            $("#hotGroup .picture .clear:eq(4)").children("div")
												.eq(0)
												.attr("class", "pic5_container");
            $("#hotGroup .pic5_container").append("<div class='ribbon-5th' id='z-index'><img src='images/5th-ribbon.png'/></div>");
            $("#hotGroup .picSize").eq(4)
									.parent("a")
									.css({
									    "width": 400 + "px",
									    "height": 266 + "px",
									    "overflow": "hidden",
									    "display": "block"
									});

            //以下封装对图片进行处理
            function DrawImage(img, W, H) {
                var width = $(img).width();
                var height = $(img).height();
                if (width / height >= W / H) {
                    if (width > W) {
                        $(img).height(H);
                        width = width * H / height;
                        $(img).width(width);
                        var margin = (W - width) / 2;
                        $(img).css("margin-left", margin).css("margin-right", margin);
                    }
                } else {
                    if (height > H) {
                        $(img).width(W);
                        height = height * W / width;
                        $(img).height(height);
                        var margin = (H - height) / 2;
                        $(img).css("margin-top", margin).css("margin-bottom", margin);
                    }
                }
            }
        })
    </script>
</body>
</html>
